<template>
  <div>
    <span>&nbsp;</span>
    <el-form ref="form" :model="target" label-width="80px" size="mini">
      <el-form-item label="名称" >
        <el-input v-model="target.title" style="width:200px"></el-input>
      </el-form-item>

      <el-form-item label="类型">
        <el-select v-model="target.type" placeholder="一级分类" @change="getTwoSubject()">
          <el-option
            v-for="subject in oneSubject"
            :key="subject.id"
            :label="subject.title"
            :value="subject.id"
          />
        </el-select>

        <el-select v-model="target.sortId" placeholder="二级分类">
          <el-option
            v-for="subject in twoSubject"
            :key="subject.id"
            :label="subject.title"
            :value="subject.id"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="金额">
        <el-input v-model="target.num" style="width:200px" ></el-input>
      </el-form-item>
      <!-- 备注-->
      <el-form-item label="备注">
        <tinymce :height="300" v-model="target.description" />
      </el-form-item>
      <el-form-item label="时间">
        <el-col :span="11">
          <el-date-picker
            type="date"
            placeholder="选择日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            v-model="target.gmtCreate"
            style="width: 40%;"
          ></el-date-picker>
        </el-col>
      </el-form-item>
      <el-form-item size="large">
        <el-button type="primary" @click="submit">立即创建</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import lrdetailed from "@/api/zw/zwlr";
import Tinymce from "@/components/Tinymce"; //引入富文本编辑器组件

export default {
  components: { Tinymce },
  data() {
    return {
      target: {
        sortId: "",
        title: "",
        type: ""
      },
      parentid: 0,
      oneSubject: [],
      twoSubject: []
    };
  },
  created() {
    this.getOneSubject(this.parentid);
    this.init();
  },
   watch: {
    //监听
    $route(to, from) {
      //路由变化方式，只要路由发生改变，方法就会执行
      this.init();
    }
  },
  methods: {
    SaveOrUpdate(target) {
      if (this.$route.params && this.$route.params.id) {
        this.updateDetailed(this.target);
      } else {
        this.submit(this.target);
      }
    },
    updateDetailed(target) {
      lrdetailed.updateDetailed(this.target).then(response => {
        this.$message({
          type: "success",
          message: "修改成功!"
        });
      });
    },
    init() {
      if (this.$route.params && this.$route.params.id) {
        var id = this.$route.params.id;
        this.getDetailedById(id);
      } else {
        this.target = {};
      }
    },
    getDetailedById(id) {
      lrdetailed.getDetailedById(id).then(response => {
        this.target = response.data.datailed;
        this.gettwoSubjectByoneSubject(this.target.type);
      });
    },
    submit(target) {
      lrdetailed.adddetailed(this.target).then(response => {
        this.$message({
          type: "success",
          message: "添加成功!"
        });
        this.$router.push({
          path: "/zw/zwlb"
        });
      });
    },
    getOneSubject(parentid) {
      lrdetailed.getOneSubject(this.parentid).then(response => {
        this.oneSubject = response.data.list;
      });
    },
    getTwoSubject(value) {
      this.target.sortId=""
      for (var i = 0; i < this.oneSubject.length; i++) {
        var one = this.oneSubject[i];
        if (one.id === value) {
          this.twoSubject = one.twoSubjectList;
        }
      }
    },
    gettwoSubjectByoneSubject(id) {
      lrdetailed.gettwoSubjectByoneSubject(id).then(response => {
        this.twoSubject = response.data.subjectlist;
      });
    }
  }
};
</script>
<style scoped>
.tinymce-container {
  line-height: 29px;
}
</style>